<!--
 * @Description: bgp列表详情
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-08-27 16:33:30
 * @LastEditTime: 2021-11-03 11:09:42
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div>
    <el-divider>基本信息</el-divider>
    <table class="backbone-info">
      <template v-if="bgpInfo">
        <tr>
          <td>租户</td>
          <td>{{bgpInfo.vrfName}}</td>
          <td>本端AS</td>
          <td>{{bgpInfo.localAs}}</td>
        </tr>
        <tr>
          <td>对端AS</td>
          <td>{{bgpInfo.remoteAs}}</td>
          <td>对端IP</td>
          <td>{{bgpInfo.remoteIp}}</td>
        </tr>
        <tr>
          <td>routerId</td>
          <td>{{bgpInfo.routerId ? bgpInfo.routerId : '-'}}</td>
          <td>keepAliveTime</td>
          <td>{{bgpInfo.keepAliveTime}}秒</td>
        </tr>
        <tr>
          <td>HoldTime</td>
          <td :colspan="3">{{bgpInfo.holdTime}}秒</td>
        </tr>
      </template>
      <template v-else>
        <tr>
          <td>暂无数据</td>
        </tr>
      </template>
    </table>
    <el-divider>路由通告</el-divider>
    <table class="backbone-info">
      <template v-if="bgpInfo">
        <tr>
          <td>NetWork通告重分布</td>
          <td>{{bgpInfo.network ? bgpInfo.network : '-'}}</td>
          <td>路由类型</td>
          <td>{{ policyType ? policyType : '-' }}</td>
        </tr>
      </template>
      <template v-else>
        <tr>
          <td>暂无数据</td>
        </tr>
      </template>
    </table>
    <div v-for="(item, index) in policyList" :key="index">
      <el-divider>{{index === 0 ?'路由策略': '路由策略' + (index + 1)}}</el-divider>
      <table class="backbone-info">
        <template v-if="bgpInfo">
          <tr>
            <td>发布方向</td>
            <td :colspan="3">
              <table class="backbone-info">
                <template v-if="item.egressItems">
                  <tr v-for="(it, key) in item.egressItems.prefixListNames" :key="key">
                    <td>前缀名称</td>
                    <td :colspan="3">{{it ? it : '-'}}</td>
                  </tr>
                  <tr>
                    <td>类型</td>
                    <td :colspan="3">{{item.ingressItems.permit ? '白名单' : '黑名单'}}</td>
                  </tr>
                  <tr>
                    <td>med</td>
                    <td>{{item.egressItems.med}}</td>
                    <td>团体</td>
                    <td>{{item.egressItems.community ? item.egressItems.community : '-'}}</td>
                  </tr>
                  <tr>
                    <td>As Path</td>
                    <td
                      :colspan="3"
                    >{{item.egressItems.asPass && item.egressItems.asPass.length > 0 ? item.egressItems.asPass.join(',') : '-'}}</td>
                  </tr>
                </template>
                <template v-else>
                  <tr>
                    <td>暂无数据</td>
                  </tr>
                </template>
              </table>
            </td>
          </tr>
          <tr>
            <td>接收方向</td>
            <td :colspan="3">
              <table class="backbone-info">
                <template v-if="item.ingressItems">
                  <tr v-for="(it, key) in item.ingressItems.prefixListNames" :key="key">
                    <td>前缀名称</td>
                    <td :colspan="3">{{it ? it : '-'}}</td>
                  </tr>
                  <tr>
                    <td>类型</td>
                    <td :colspan="3">{{item.ingressItems.permit ? '白名单' : '黑名单'}}</td>
                  </tr>
                </template>
                <template v-else>
                  <tr>
                    <td>暂无数据</td>
                  </tr>
                </template>
              </table>
            </td>
          </tr>
        </template>
        <template v-else>
          <tr>
            <td>暂无数据</td>
          </tr>
        </template>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'bgpInfo',
  props: ['bgpInfo', 'tenantList'],
  data () {
    return {
      policyList: [],
      policyType: ''
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      let typeList = [];
      if (_this.bgpInfo.defaultOriginate) {
        typeList.push('默认路由');
      }
      if (_this.bgpInfo.connected) {
        typeList.push('直连路由');
      }
      if (_this.bgpInfo.staticed) {
        typeList.push('静态路由');
      }
      _this.policyType = typeList.join('/');
      let egressItems = _this.bgpInfo.egressItems;
      let ingressItems = _this.bgpInfo.ingressItems;
      _this.policyList = [];
      for (let i = 0; i < ingressItems.length; i++) {
        for (let k = 0; k < egressItems.length; k++) {
          if (i === k) {
            _this.policyList.push({
              ingressItems: ingressItems[i],
              egressItems: egressItems[k]
            });
          }
        }
      }
    });
  },
  methods: {
    // 过滤前缀名称
    filterName (val) {
      if (!val) {
        return '-';
      } else {
        if (val.indexOf('_') > -1) {
          let index = val.indexOf('_');
          return val.substring(index + 1);
        } else {
          return val;
        }
      }
    },
    // 返回租户名称
    // 返回租户名称
    returnDgName (dgId, tenantList) {
      for (let i = 0; i < tenantList.length; i++) {
        if (dgId === tenantList[i].value) {
          return tenantList[i].label;
        }
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.backbone-info {
  width: 100%;
  border: 1px solid #ebeef5;
  tr {
    width: 100%;
    td {
      padding: 5px 15px;
      line-height: 30px;
      &:first-child {
        width: 170px;
        text-align: center;
        background: #f8f8f9;
      }
      &:nth-child(3) {
        width: 170px;
        text-align: center;
        background: #f8f8f9;
      }
      &:last-child {
        width: calc(100% - 170px);
      }
    }
  }
}
</style>
